
<!DOCTYPE HTML>
<html lang="" >
    <head>
        <meta charset="UTF-8">
        <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
        <title>加载 CSS · test search plus plugin</title>
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="description" content="">
        <meta name="generator" content="GitBook 3.2.2">
        
        
        
    
    <link rel="stylesheet" href="gitbook/style.css">

    
            
                
                <link rel="stylesheet" href="gitbook/gitbook-plugin-search-pro/search.css">
                
            
                
                <link rel="stylesheet" href="gitbook/gitbook-plugin-fontsettings/website.css">
                
            
                
                <link rel="stylesheet" href="gitbook/gitbook-plugin-highlight/website.css">
                
            
        

    

    
        
    
        
    
        
    
        
    
        
    
        
    

        
    
    
    <meta name="HandheldFriendly" content="true"/>
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <link rel="apple-touch-icon-precomposed" sizes="152x152" href="gitbook/images/apple-touch-icon-precomposed-152.png">
    <link rel="shortcut icon" href="gitbook/images/favicon.ico" type="image/x-icon">

    
    <link rel="next" href="Automatic-CSS-refresh.html" />
    
    
    <link rel="prev" href="CSS-Fonts-Images.md" />
    

    </head>
    <body>
        
<div class="book">
    <div class="book-summary">
        
            
<div id="book-search-input" role="search">
    <input type="text" placeholder="Type to search" />
</div>

            
                <nav role="navigation">
                


<ul class="summary">
    
    

    

    
        
        
    
        <li class="chapter " data-level="1.1" data-path="./">
            
                <a href="./">
            
                    
                    Introduction
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.2" data-path="Introduction-to-Webpack.html">
            
                <a href="Introduction-to-Webpack.html">
            
                    
                    介绍 Webpack
            
                </a>
            

            
            <ul class="articles">
                
    
        <li class="chapter " data-level="1.2.1" data-path="Getting-started.html">
            
                <a href="Getting-started.html">
            
                    
                    第一步
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.2.2" data-path="Running-a-workflow.html">
            
                <a href="Running-a-workflow.html">
            
                    
                    开始工作流
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.2.3" data-path="Automatic-browser-refresh.html">
            
                <a href="Automatic-browser-refresh.html">
            
                    
                    浏览器自动刷新
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.2.4" data-path="Requiring-files.html">
            
                <a href="Requiring-files.html">
            
                    
                    引入文件
            
                </a>
            

            
        </li>
    

            </ul>
            
        </li>
    
        <li class="chapter " data-level="1.3" data-path="Introduction-to-React-JS.html">
            
                <a href="Introduction-to-React-JS.html">
            
                    
                    React JS
            
                </a>
            

            
            <ul class="articles">
                
    
        <li class="chapter " data-level="1.3.1" data-path="Configuring-react-js.html">
            
                <a href="Configuring-react-js.html">
            
                    
                    配置 React JS
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.3.2" data-path="Optimizing-rebundling.html">
            
                <a href="Optimizing-rebundling.html">
            
                    
                    优化重合并
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.3.3" data-path="Type-checking-with-flow.html">
            
                <a href="Type-checking-with-flow.html">
            
                    
                    Flow
            
                </a>
            

            
        </li>
    

            </ul>
            
        </li>
    
        <li class="chapter " data-level="1.4" data-path="CSS-Fonts-Images.md">
            
                <span>
            
                    
                    CSS, Fonts and Images
            
                </a>
            

            
            <ul class="articles">
                
    
        <li class="chapter active" data-level="1.4.1" data-path="Loading-CSS.html">
            
                <a href="Loading-CSS.html">
            
                    
                    加载 CSS
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.4.2" data-path="Automatic-CSS-refresh.html">
            
                <a href="Automatic-CSS-refresh.html">
            
                    
                    自动刷新 CSS
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.4.3" data-path="Loading-LESS-or-SASS.html">
            
                <a href="Loading-LESS-or-SASS.html">
            
                    
                    加载 LESS 和 SASS
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.4.4" data-path="Inlining-images.html">
            
                <a href="Inlining-images.html">
            
                    
                    内联 images
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.4.5" data-path="Inlining-fonts.html">
            
                <a href="Inlining-fonts.html">
            
                    
                    内联 fonts
            
                </a>
            

            
        </li>
    

            </ul>
            
        </li>
    
        <li class="chapter " data-level="1.5" data-path="Deployment-strategies.md">
            
                <span>
            
                    
                    部署策略
            
                </a>
            

            
            <ul class="articles">
                
    
        <li class="chapter " data-level="1.5.1" data-path="Structuring-configuration.html">
            
                <a href="Structuring-configuration.html">
            
                    
                    发布配置
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.5.2" data-path="Single-bundle.html">
            
                <a href="Single-bundle.html">
            
                    
                    合并成单文件
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.5.3" data-path="Split-app-and-vendors.html">
            
                <a href="Split-app-and-vendors.html">
            
                    
                    分离应用和第三方
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.5.4" data-path="Multiple-entry-points.html">
            
                <a href="Multiple-entry-points.html">
            
                    
                    多重入口
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.5.5" data-path="Lazy-loaded-entry-points.html">
            
                <a href="Lazy-loaded-entry-points.html">
            
                    
                    懒加载入口文件
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.5.6" data-path="Isomorphic-app.html">
            
                <a href="Isomorphic-app.html">
            
                    
                    同构渲染
            
                </a>
            

            
        </li>
    

            </ul>
            
        </li>
    
        <li class="chapter " data-level="1.6" data-path="Wing-It-Like-a-Pro.html">
            
                <a href="Wing-It-Like-a-Pro.html">
            
                    
                    进阶
            
                </a>
            

            
            <ul class="articles">
                
    
        <li class="chapter " data-level="1.6.1" data-path="Optimizing-development.html">
            
                <a href="Optimizing-development.html">
            
                    
                    优化开发
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.6.2" data-path="Hot-loading-components.html">
            
                <a href="Hot-loading-components.html">
            
                    
                    热加载组件
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.6.3" data-path="JavaScript-next.html">
            
                <a href="JavaScript-next.html">
            
                    
                    使用下一代 JavaScript
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.6.4" data-path="Optimizing-caching.html">
            
                <a href="Optimizing-caching.html">
            
                    
                    优化缓存
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.6.5" data-path="Matchers.html">
            
                <a href="Matchers.html">
            
                    
                    匹配器
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.6.6" data-path="Lazy-loading-entry-points.md">
            
                <span>
            
                    
                    懒加载入口
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.6.7" data-path="Creating-a-common-bundle.md">
            
                <span>
            
                    
                    创建一个复用代码
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.6.8" data-path="Understanding-chunks.html">
            
                <a href="Understanding-chunks.html">
            
                    
                    理解 Chunks
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.6.9" data-path="Authoring-libraries.html">
            
                <a href="Authoring-libraries.html">
            
                    
                    创建库
            
                </a>
            

            
        </li>
    

            </ul>
            
        </li>
    

    

    <li class="divider"></li>

    <li>
        <a href="https://www.gitbook.com" target="blank" class="gitbook-link">
            Published with GitBook
        </a>
    </li>
</ul>


                </nav>
            
        
    </div>

    <div class="book-body">
        
            <div class="body-inner">
                
                    

<div class="book-header" role="navigation">
    

    <!-- Title -->
    <h1>
        <i class="fa fa-circle-o-notch fa-spin"></i>
        <a href="." >加载 CSS</a>
    </h1>
</div>




                    <div class="page-wrapper" tabindex="-1" role="main">
                        <div class="page-inner">
                            
<div id="book-search-results">
    <div class="search-noresults">
    
                                <section class="normal markdown-section">
                                
                                <p>Webpack allows you to load CSS like you load any other code. What strategy you choose is up to you, but you can do everything from loading all your css in the main entry point file to one css file for each component.</p>
<p>Webpack&#x5141;&#x8BB8;&#x50CF;&#x52A0;&#x8F7D;&#x4EFB;&#x4F55;&#x4EE3;&#x7801;&#x4E00;&#x6837;&#x52A0;&#x8F7D; CSS&#x3002;&#x4F60;&#x53EF;&#x4EE5;&#x9009;&#x62E9;&#x4F60;&#x6240;&#x9700;&#x8981;&#x7684;&#x65B9;&#x5F0F;&#xFF0C;&#x4F46;&#x662F;&#x4F60;&#x53EF;&#x4EE5;&#x4E3A;&#x6BCF;&#x4E2A;&#x7EC4;&#x4EF6;&#x628A;&#x6240;&#x6709;&#x4F60;&#x7684; CSS &#x52A0;&#x8F7D;&#x5230;&#x5165;&#x53E3;&#x4E3B;&#x6587;&#x4EF6;&#x4E2D;&#x6765;&#x505A;&#x4EFB;&#x4F55;&#x4E8B;&#x60C5;&#x3002;</p>
<p>Loading CSS requires the <strong>css-loader</strong> and the <strong>style-loader</strong>. They have two different jobs. The <strong>css-loader</strong> will go through the CSS file and find <code>url()</code> expressions and resolve them. The <strong>style-loader</strong> will insert the raw css into a style tag on your page.</p>
<p>&#x52A0;&#x8F7D; CSS &#x9700;&#x8981; <strong>css-loader</strong> &#x548C; <strong>style-loader</strong>&#xFF0C;&#x4ED6;&#x4EEC;&#x505A;&#x4E24;&#x4EF6;&#x4E0D;&#x540C;&#x7684;&#x4E8B;&#x60C5;&#xFF0C;<strong>css-loader</strong>&#x4F1A;&#x904D;&#x5386; CSS &#x6587;&#x4EF6;&#xFF0C;&#x7136;&#x540E;&#x627E;&#x5230; <code>url()</code> &#x8868;&#x8FBE;&#x5F0F;&#x7136;&#x540E;&#x5904;&#x7406;&#x4ED6;&#x4EEC;&#xFF0C;<strong>style-loader</strong> &#x4F1A;&#x628A;&#x539F;&#x6765;&#x7684; CSS &#x4EE3;&#x7801;&#x63D2;&#x5165;&#x9875;&#x9762;&#x4E2D;&#x7684;&#x4E00;&#x4E2A; style &#x6807;&#x7B7E;&#x4E2D;&#x3002;</p>
<h2 id="&#x51C6;&#x5907;&#x52A0;&#x8F7D;-css">&#x51C6;&#x5907;&#x52A0;&#x8F7D; CSS</h2>
<p>Install the two loaders: <code>npm install css-loader style-loader --save-dev</code>.</p>
<p>&#x5B89;&#x88C5;&#x8FD9;&#x4E24;&#x4E2A;&#x52A0;&#x8F7D;&#x5668;&#xFF1A;<code>npm install css-loader style-loader --save-dev</code></p>
<p>In the <em>webpack.config.js</em> file you can add the following loader configuration:</p>
<p>&#x4F60;&#x53EF;&#x4EE5;&#x628A;&#x4E0B;&#x9762;&#x7684;&#x52A0;&#x8F7D;&#x5668;&#x914D;&#x7F6E;&#x52A0;&#x5230; <em>Webpack.config.js</em> &#x6587;&#x4EF6;&#x4E2D;&#x3002;</p>
<p><strong>webpack.config.js</strong></p>
<pre><code class="lang-javascript"><span class="hljs-keyword">var</span> path = <span class="hljs-built_in">require</span>(<span class="hljs-string">&apos;path&apos;</span>);
<span class="hljs-keyword">var</span> config = {
  entry: path.resolve(__dirname, <span class="hljs-string">&apos;app/main.js&apos;</span>)
  output: {
    path: path.resolve(__dirname, <span class="hljs-string">&apos;build&apos;</span>),
    filename: <span class="hljs-string">&apos;bundle.js&apos;</span>
  },
  <span class="hljs-built_in">module</span>: {
    loaders: [{
      test: <span class="hljs-regexp">/\.jsx$/</span>,
      loader: <span class="hljs-string">&apos;babel&apos;</span>
    }, {
      test: <span class="hljs-regexp">/\.css$/</span>, <span class="hljs-comment">// Only .css files</span>
      loader: <span class="hljs-string">&apos;style!css&apos;</span> <span class="hljs-comment">// Run both loaders</span>
    }]
  }
};

<span class="hljs-built_in">module</span>.exports = config;
</code></pre>
<h2 id="&#x52A0;&#x8F7D;-css-&#x6587;&#x4EF6;">&#x52A0;&#x8F7D; CSS &#x6587;&#x4EF6;</h2>
<p>Loading a CSS file is a simple as loading any file:</p>
<p>&#x52A0;&#x8F7D;&#x4E00;&#x4E2A; CSS &#x6587;&#x4EF6;&#x5C31;&#x548C;&#x52A0;&#x8F7D;&#x5176;&#x4ED6;&#x6587;&#x4EF6;&#x4E00;&#x6837;&#x7B80;&#x5355;&#xFF1A;</p>
<p><strong>main.js</strong></p>
<pre><code class="lang-javascript"><span class="hljs-keyword">import</span> <span class="hljs-string">&apos;./main.css&apos;</span>;
<span class="hljs-comment">// Other code</span>
</code></pre>
<p><strong>Component.jsx</strong></p>
<pre><code class="lang-javascript"><span class="hljs-keyword">import</span> <span class="hljs-string">&apos;./Component.css&apos;</span>;
<span class="hljs-keyword">import</span> React <span class="hljs-keyword">from</span> <span class="hljs-string">&apos;react&apos;</span>;

<span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> React.createClass({
  render: <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params"></span>) </span>{
    <span class="hljs-keyword">return</span> <span class="xml"><span class="hljs-tag">&lt;<span class="hljs-name">h1</span>&gt;</span>Hello world!<span class="hljs-tag">&lt;/<span class="hljs-name">h1</span>&gt;</span></span>
  }
});
</code></pre>
<p><strong>Note!</strong> You can of course do this with both CommonJS and AMD.</p>
<p><strong>&#x6CE8;&#x610F;&#xFF01;</strong> &#x4F60;&#x4E5F;&#x53EF;&#x4EE5;&#x5728; CommonJS &#x548C; AMD &#x4E2D;&#x505A;&#x540C;&#x6837;&#x7684;&#x4E8B;&#x60C5;&#x3002;</p>
<h2 id="css-&#x52A0;&#x8F7D;&#x7B56;&#x7565;">CSS &#x52A0;&#x8F7D;&#x7B56;&#x7565;</h2>
<p>Depending on your application you might consider three main strategies. In addition to this you should consider including some of your basic CSS inlined with the initial payload (index.html). This will set the structure and maybe a loader while the rest of your application is downloading and executing.</p>
<p>&#x6839;&#x636E;&#x4F60;&#x7684;&#x5E94;&#x7528;&#xFF0C;&#x4F60;&#x53EF;&#x80FD;&#x4F1A;&#x8003;&#x7565;&#x4E09;&#x79CD;&#x7B56;&#x7565;&#x3002;&#x53E6;&#x5916;&#xFF0C;&#x4F60;&#x9700;&#x8981;&#x8003;&#x8651;&#x628A;&#x4E00;&#x4E9B;&#x57FA;&#x7840;&#x7684; CSS &#x5185;&#x8054;&#x5230;&#x521D;&#x59CB;&#x5BB9;&#x5668;&#x4E2D;&#xFF08;index.html&#xFF09;&#xFF0C;&#x8FD9;&#x6837;&#x8BBE;&#x7F6E;&#x7684;&#x7ED3;&#x6784;&#x80FD;&#x591F;&#x5728;&#x5E94;&#x7528;&#x4E0B;&#x8F7D;&#x548C;&#x6267;&#x884C;&#x7684;&#x65F6;&#x5019;&#x52A0;&#x8F7D;&#x5269;&#x4E0B;&#x7684;&#x5E94;&#x7528;&#x3002;</p>
<h3 id="&#x6240;&#x6709;&#x5408;&#x5E76;&#x6210;&#x4E00;&#x4E2A;">&#x6240;&#x6709;&#x5408;&#x5E76;&#x6210;&#x4E00;&#x4E2A;</h3>
<p>In your main entry point, e.g. <code>app/main.js</code> you can load up your entire CSS for the whole project:</p>
<p>&#x5728;&#x4F60;&#x7684;&#x4E3B;&#x5165;&#x53E3;&#x6587;&#x4EF6;&#x4E2D;&#x4E2A;&#xFF0C;&#x6BD4;&#x5982; <code>app/main.js</code> &#x4F60;&#x53EF;&#x4EE5;&#x4E3A;&#x6574;&#x4E2A;&#x9879;&#x76EE;&#x52A0;&#x8F7D;&#x6240;&#x6709;&#x7684; CSS&#xFF1A;</p>
<p><strong>app/main.js</strong></p>
<pre><code class="lang-javascript"><span class="hljs-keyword">import</span> <span class="hljs-string">&apos;./project-styles.css&apos;</span>;
<span class="hljs-comment">// &#x5176;&#x4ED6; JS &#x4EE3;&#x7801;</span>
</code></pre>
<p>The CSS is included in the application bundle and does not need to download.</p>
<p>CSS &#x5C31;&#x5B8C;&#x5168;&#x5305;&#x542B;&#x5728;&#x5408;&#x5E76;&#x7684;&#x5E94;&#x7528;&#x4E2D;&#xFF0C;&#x518D;&#x4E5F;&#x4E0D;&#x9700;&#x8981;&#x91CD;&#x65B0;&#x4E0B;&#x8F7D;&#x3002;</p>
<h3 id="&#x61D2;&#x52A0;&#x8F7D;">&#x61D2;&#x52A0;&#x8F7D;</h3>
<p>If you take advantage of lazy loading by having multiple entry points to your application, you can include specific CSS for each of those entry points:</p>
<p>&#x5982;&#x679C;&#x4F60;&#x60F3;&#x53D1;&#x6325;&#x5E94;&#x7528;&#x4E2D;&#x591A;&#x91CD;&#x5165;&#x53E3;&#x6587;&#x4EF6;&#x7684;&#x4F18;&#x52BF;&#xFF0C;&#x4F60;&#x53EF;&#x4EE5;&#x5728;&#x6BCF;&#x4E2A;&#x5165;&#x53E3;&#x70B9;&#x5305;&#x542B;&#x5404;&#x81EA;&#x7684; CSS&#xFF1A;</p>
<p><strong>app/main.js</strong></p>
<pre><code class="lang-javascript"><span class="hljs-keyword">import</span> <span class="hljs-string">&apos;./style.css&apos;</span>;
<span class="hljs-comment">// &#x5176;&#x4ED6; JS &#x4EE3;&#x7801;</span>
</code></pre>
<p><strong>app/entryA/main.js</strong></p>
<pre><code class="lang-javascript"><span class="hljs-keyword">import</span> <span class="hljs-string">&apos;./style.css&apos;</span>;
<span class="hljs-comment">// &#x5176;&#x4ED6; JS &#x4EE3;&#x7801;</span>
</code></pre>
<p><strong>app/entryB/main.js</strong></p>
<pre><code class="lang-javascript"><span class="hljs-keyword">import</span> <span class="hljs-string">&apos;./style.css&apos;</span>;
<span class="hljs-comment">// &#x5176;&#x4ED6; JS &#x4EE3;&#x7801;</span>
</code></pre>
<p>You divide your modules by folders and include both CSS and JavaScript files in those folders. Again, the imported CSS is included in each entry bundle when running in production.</p>
<p>&#x4F60;&#x628A;&#x4F60;&#x7684;&#x6A21;&#x5757;&#x7528;&#x6587;&#x4EF6;&#x5939;&#x5206;&#x79BB;&#xFF0C;&#x6BCF;&#x4E2A;&#x6587;&#x4EF6;&#x5939;&#x6709;&#x5404;&#x81EA;&#x7684; CSS &#x548C; JavaScript &#x6587;&#x4EF6;&#x3002;&#x518D;&#x6B21;&#xFF0C;&#x5F53;&#x5E94;&#x7528;&#x53D1;&#x5E03;&#x7684;&#x65F6;&#x5019;&#xFF0C;&#x5BFC;&#x5165;&#x7684; CSS &#x5DF2;&#x7ECF;&#x52A0;&#x8F7D;&#x5230;&#x6BCF;&#x4E2A;&#x5165;&#x53E3;&#x6587;&#x4EF6;&#x4E2D;&#x3002;</p>
<h3 id="&#x5236;&#x5B9A;&#x7684;&#x7EC4;&#x4EF6;">&#x5236;&#x5B9A;&#x7684;&#x7EC4;&#x4EF6;</h3>
<p>With this strategy you create a CSS file for each component. It is common to namespace the CSS classes with the component name, thus avoiding some class of one component interfering with the class of an other.</p>
<p>&#x4F60;&#x53EF;&#x4EE5;&#x6839;&#x636E;&#x8FD9;&#x4E2A;&#x7B56;&#x7565;&#x4E3A;&#x6BCF;&#x4E2A;&#x7EC4;&#x4EF6;&#x521B;&#x5EFA; CSS &#x6587;&#x4EF6;&#xFF0C;&#x53EF;&#x4EE5;&#x8BA9;&#x7EC4;&#x4EF6;&#x540D;&#x548C; CSS &#x4E2D;&#x7684; class &#x4F7F;&#x7528;&#x4E00;&#x4E2A;&#x547D;&#x540D;&#x7A7A;&#x95F4;&#xFF0C;&#x6765;&#x907F;&#x514D;&#x4E00;&#x4E2A;&#x7EC4;&#x4EF6;&#x4E2D;&#x7684;&#x4E00;&#x4E9B; class &#x5E72;&#x6270;&#x5230;&#x53E6;&#x5916;&#x4E00;&#x4E9B;&#x7EC4;&#x4EF6;&#x7684; class&#x3002;</p>
<p><strong>app/components/MyComponent.css</strong></p>
<pre><code class="lang-css"><span class="hljs-selector-class">.MyComponent-wrapper</span> {
  <span class="hljs-attribute">background-color</span>: <span class="hljs-number">#EEE</span>;
}
</code></pre>
<p><strong>app/components/MyComponent.jsx</strong></p>
<pre><code>import &apos;./MyComponent.css&apos;;
import React from &apos;react&apos;;

export default React.createClass({
  render: function () {
    return (
      &lt;div className=&quot;MyComponent-wrapper&quot;&gt;
        &lt;h1&gt;Hello world&lt;/h1&gt;
      &lt;/div&gt;
    )
  }
});
</code></pre><h2 id="&#x4F7F;&#x7528;&#x5185;&#x8054;&#x6837;&#x5F0F;&#x53D6;&#x4EE3;-css-&#x6587;&#x4EF6;">&#x4F7F;&#x7528;&#x5185;&#x8054;&#x6837;&#x5F0F;&#x53D6;&#x4EE3; CSS &#x6587;&#x4EF6;</h2>
<p>With &quot;React Native&quot; you do not use stylesheets at all, you only use the <em>style-attribute</em>. By defining your CSS as objects. Depending on your project, you might consider this as your CSS strategy.</p>
<p>&#x5728; &#x201C;React Native&#x201D; &#x4E2D;&#x4F60;&#x4E0D;&#x518D;&#x9700;&#x8981;&#x4F7F;&#x7528;&#x4EFB;&#x4F55; CSS &#x6587;&#x4EF6;&#xFF0C;&#x4F60;&#x53EA;&#x9700;&#x8981;&#x4F7F;&#x7528; <em>style &#x5C5E;&#x6027;</em>&#xFF0C;&#x53EF;&#x4EE5;&#x628A;&#x4F60;&#x7684; CSS &#x5B9A;&#x4E49;&#x6210;&#x4E00;&#x4E2A;&#x5BF9;&#x8C61;&#xFF0C;&#x90A3;&#x6837;&#x5C31;&#x53EF;&#x4EE5;&#x6839;&#x636E;&#x4F60;&#x7684;&#x9879;&#x76EE;&#x91CD;&#x65B0;&#x6765;&#x8003;&#x7565;&#x4F60;&#x7684; CSS &#x7B56;&#x7565;&#x3002;</p>
<p><strong>app/components/MyComponent.jsx</strong></p>
<pre><code class="lang-javascript"><span class="hljs-keyword">import</span> React <span class="hljs-keyword">from</span> <span class="hljs-string">&apos;react&apos;</span>;

<span class="hljs-keyword">var</span> style = {
  backgroundColor: <span class="hljs-string">&apos;#EEE&apos;</span>
};

<span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> React.createClass({
  render: <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params"></span>) </span>{
    <span class="hljs-keyword">return</span> (
      <span class="xml"><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">style</span>=<span class="hljs-string">{style}</span>&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-name">h1</span>&gt;</span>Hello world<span class="hljs-tag">&lt;/<span class="hljs-name">h1</span>&gt;</span>
      <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></span>
    )
  }
});
</code></pre>

                                
                                </section>
                            
    </div>
    <div class="search-results">
        <div class="has-results">
            
            <h1 class="search-results-title"><span class='search-results-count'></span> results matching "<span class='search-query'></span>"</h1>
            <ul class="search-results-list"></ul>
            
        </div>
        <div class="no-results">
            
            <h1 class="search-results-title">No results matching "<span class='search-query'></span>"</h1>
            
        </div>
    </div>
</div>

                        </div>
                    </div>
                
            </div>

            
                
                <a href="CSS-Fonts-Images.md" class="navigation navigation-prev " aria-label="Previous page: CSS, Fonts and Images">
                    <i class="fa fa-angle-left"></i>
                </a>
                
                
                <a href="Automatic-CSS-refresh.html" class="navigation navigation-next " aria-label="Next page: 自动刷新 CSS">
                    <i class="fa fa-angle-right"></i>
                </a>
                
            
        
    </div>

    <script>
        var gitbook = gitbook || [];
        gitbook.push(function() {
            gitbook.page.hasChanged({"page":{"title":"加载 CSS","level":"1.4.1","depth":2,"next":{"title":"自动刷新 CSS","level":"1.4.2","depth":2,"path":"Automatic-CSS-refresh.md","ref":"Automatic-CSS-refresh.md","articles":[]},"previous":{"title":"CSS, Fonts and Images","level":"1.4","depth":1,"path":"CSS-Fonts-Images.md","ref":"CSS-Fonts-Images.md","articles":[{"title":"加载 CSS","level":"1.4.1","depth":2,"path":"Loading-CSS.md","ref":"Loading-CSS.md","articles":[]},{"title":"自动刷新 CSS","level":"1.4.2","depth":2,"path":"Automatic-CSS-refresh.md","ref":"Automatic-CSS-refresh.md","articles":[]},{"title":"加载 LESS 和 SASS","level":"1.4.3","depth":2,"path":"Loading-LESS-or-SASS.md","ref":"Loading-LESS-or-SASS.md","articles":[]},{"title":"内联 images","level":"1.4.4","depth":2,"path":"Inlining-images.md","ref":"Inlining-images.md","articles":[]},{"title":"内联 fonts","level":"1.4.5","depth":2,"path":"Inlining-fonts.md","ref":"Inlining-fonts.md","articles":[]}]},"dir":"ltr"},"config":{"plugins":["-lunr","-search","search-pro","fontsettings","livereload"],"root":"./content","styles":{"website":"styles/website.css","pdf":"styles/pdf.css","epub":"styles/epub.css","mobi":"styles/mobi.css","ebook":"styles/ebook.css","print":"styles/print.css"},"pluginsConfig":{"search-pro":{},"fontsettings":{"theme":"white","family":"sans","size":2},"livereload":{},"highlight":{},"sharing":{"facebook":true,"twitter":true,"google":false,"weibo":false,"instapaper":false,"vk":false,"all":["facebook","google","twitter","weibo","instapaper"]},"theme-default":{"styles":{"website":"styles/website.css","pdf":"styles/pdf.css","epub":"styles/epub.css","mobi":"styles/mobi.css","ebook":"styles/ebook.css","print":"styles/print.css"},"showLevel":false}},"theme":"default","pdf":{"pageNumbers":true,"fontSize":12,"fontFamily":"Arial","paperSize":"a4","chapterMark":"pagebreak","pageBreaksBefore":"/","margin":{"right":62,"left":62,"top":56,"bottom":56}},"structure":{"langs":"LANGS.md","readme":"README.md","glossary":"GLOSSARY.md","summary":"SUMMARY.md"},"variables":{"version":"0.0.0"},"title":"test search plus plugin","gitbook":"*"},"file":{"path":"Loading-CSS.md","mtime":"2017-01-24T08:51:37.000Z","type":"markdown"},"gitbook":{"version":"3.2.2","time":"2017-01-24T08:53:13.796Z"},"basePath":".","book":{"language":""}});
        });
    </script>
</div>

        
    <script src="gitbook/gitbook.js"></script>
    <script src="gitbook/theme.js"></script>
    
        
        <script src="gitbook/gitbook-plugin-search-pro/jquery.mark.min.js"></script>
        
    
        
        <script src="gitbook/gitbook-plugin-search-pro/search.js"></script>
        
    
        
        <script src="gitbook/gitbook-plugin-fontsettings/fontsettings.js"></script>
        
    
        
        <script src="gitbook/gitbook-plugin-livereload/plugin.js"></script>
        
    
        
        <script src="gitbook/gitbook-plugin-sharing/buttons.js"></script>
        
    

    </body>
</html>

